<script setup>
import { reactive, ref } from "vue";
import SuperTable from "./components/SuperTable.vue";

const tableHeader = ref(["项目", "结果", "程度"]);
const tableData1 = ref([
  ['面色', '面白', '轻微'],
  ['眼周1', '无黑眼圈1', '--'],
  ['脸颊', ['无斑', '无痘'], ['-', '-']],
  ['眉间', '无痘', '轻微'],
  ['额头', ['无皱纹', '无痘'], ['-', '-']]
]);

const tableData = ref([
  {
    name: '面色',
    result: '面白',
    level: '轻微'
  },
  {
    name1: '眼周',
    result1: '无黑眼圈',
    level1: '--'
  },
  {
    name2: '脸颊',
    result2: ['无斑', '无痘'],
    level2: ['-', '好']
  },
  {
    name3: '眉间',
    result3: '无痘',
    level3: '轻微'
  },
  {
    name4: '额头',
    result4: ['无皱纹', '无痘'],
    level4: ['-', '-']
  },
  {
    name4: '额头',
    result4: ['无皱纹', '无痘'],
    level4: ['-', '-']
  },
]);


</script>

<template>
  <SuperTable
    layout="split"
    header-position="top"
    :headers="tableHeader"
    :data="tableData1"
    :split-index="2"
  />

  <!-- 3️⃣ 表头在左侧，合并单元格 -->
  <!-- <BydTable layout="bordered" header-position="left" :data="[
      {
        header: '面部',
        cells: [
          { value: '面白', colspan: 1 },
          { value: '轻微', colspan: 1 },
        ],
      },
      {
        header: '眼部',
        cells: [
          { value: '无黑眼圈', rowspan: 2 },
          { value: '--' },
        ],
      },
      {
        header: '鼻子',
        cells: [{ value: '正常' }],
      },
    ]" /> -->
</template>

<style scoped lang="scss"></style>
